import React, { Component } from 'react'
import './Footer.css'
import Checkbox from '../../Checkbox/Checkbox.jsx'

export default class Footer extends Component {
  state = {
    checkAll: false
  }
  render() {
    return (
      <div className="Footer">
        <div className="Footer_r">
          <Checkbox value={this.state.checkAll} bindChange={this.changeCheckAll} />
          <span>全选/取消全选</span>
        </div>
        <button className="button" onClick={this.batchDelect}>批量删除选中</button>
      </div>
    )
  }

  componentDidMount() {
    this.token = this.$pubsub.subscribe('Main_setCheckAll', (_, data) => this.setState({ checkAll: data })) // 消息订阅
  }
  componentWillUnmount() {
    this.$pubsub.unsubscribe(this.token)  //取消订阅
  }

  /**
   * 复选框改变事件
   * @param {boolean} value - 改变后的值
   * @returns {function} - 消息发布
   */
  changeCheckAll = (value) => this.$pubsub.publish('Footer_changeCheckAll', { target: 'all', value }) //消息发布

  /**
   * 点击批量删除选中
   * @returns {function} - 消息发布
   */
  batchDelect = () => this.$pubsub.publish('Footer_batchDelect', 'batch')
}
